<template>
    <view class="page">
        <view class="top_box">
            <back :isBack="true" :title="'设置'" :isBg="false"></back>

            <view class="ghtx_box">
                <view class="tx_box">
                    <view class="left_text_box">头像</view>
                    <view class="rt_tx_box">
                        <button class="zstx_box" @chooseavatar="chooseavatar" open-type="chooseAvatar">
                            <image :src="userObj.avatar" mode="scaleToFill" />
                        </button>
                        <u-icon color="rgba(199, 199, 199, 1)" size="26" name="arrow-right"></u-icon>
                    </view>
                </view>
                <!-- 昵称 -->
                <view class="nickname_box">
                    <view class="zs_nck_box">昵称</view>
                    <view class="cz_box" @click="editNick">
                        <text style="margin-right: 22rpx;">{{ userObj.nickname }}</text>
                        <u-icon color="rgba(199, 199, 199, 1)" size="26" name="arrow-right"></u-icon>
                    </view>
                </view>
            </view>
        </view>

        <!-- <view class="account_box">
            <view class="nickname_box">
                <view class="zs_nck_box">账号</view>

                <view class="cz_box">
                    <u-icon color="rgba(199, 199, 199, 1)" size="26" name="arrow-right"></u-icon>
                </view>
            </view>
            <view class="sex_box">
                <view class="zs_nck_box">消息通知设置</view>

                <view class="cz_box">
                    <u-icon color="rgba(199, 199, 199, 1)" size="26" name="arrow-right"></u-icon>
                </view>
            </view>
        </view> -->

        <!-- 关于六久六智运 -->
        <view class="dregs_box">
            <view class="sex_box" @click="onClick">
                <view class="zs_nck_box">消息通知设置</view>
                <!-- <switch :checked="isChecked" @change="handleSwitchChange" /> -->
                <view class="cz_box">
                    <u-icon color="rgba(199, 199, 199, 1)" size="26" name="arrow-right"></u-icon>
                    <!-- <u-switch v-model="checked" @change="switchChange"></u-switch> -->
                </view>
            </view>
            <view class="sex_box" @click="dregs">
                <view class="zs_nck_box">关于六久六智运</view>

                <view class="cz_box">
                    <u-icon color="rgba(199, 199, 199, 1)" size="26" name="arrow-right"></u-icon>
                </view>
            </view>
        </view>
        <!-- 退出登录 -->
        <view class="offLogin_box" @click="$noMultipleClicks(loginOut)">退出登录</view>
    </view>
</template>
<script>
import back from "@/components/goback/goback"
export default {
    components: {
        back
    },
    data() {
        return {
            noClick: true,//防连点
            userObj: {
                avatar: '',
                avatarUrl: '',
                nickname: ''
            },//用户信息
            file: '',
            isChecked: false, // 初始开关状态
        }
    },
    onShow() {
        this.userObj = JSON.parse(uni.getStorageSync('user'))
        this.userObj.avatarUrl = this.userObj.path
    },

    methods: {
        // handleSwitchChange(event) {
        //     // if (event.detail.value) {
        //     // 开关打开，直接调用uni.openSetting
        //     // uni.openSetting();
        //     // uni.openSetting({
        //     //     success(res) {
        //     //         console.log(res.authSetting)
        //     //     }
        //     // });
        //     // } else {
        //     //     // 开关关闭，可以处理其他逻辑，例如提示用户关闭某项功能
        //     //     uni.showModal({
        //     //         title: '提示',
        //     //         content: '确认要关闭这个功能吗？',
        //     //         success: (res) => {
        //     //             if (res.confirm) {
        //     //                 // 用户确定关闭，可以执行相关逻辑，例如更新isChecked为false
        //     //                 this.isChecked = false;
        //     //             } else if (res.cancel) {
        //     //                 // 用户取消关闭，重新打开开关
        //     //                 this.isChecked = true;
        //     //             }
        //     //         }
        //     //     });
        //     // }
        // },
        onClick() {
            let id = '49EBbz2Jko0-G9ZWLAdY86liamXGsT36IYbfqzhTpeE'
            uni.getSetting({
                withSubscriptions: true,
                success(res) {
                    console.log(res, '订阅信息', res.subscriptionsSetting);
                    if (!res.subscriptionsSetting.mainSwitch) {
                        uni.openSetting({
                            success(res) {
                                console.log('打开设置页', res.authSetting);
                            }
                        })
                    } else {
                        uni.requestSubscribeMessage({
                            tmplIds: [id],
                            success(res) {
                                console.log('requestSubscribeMessage 订阅信息', res);
                                if (res[id] ==
                                    "accept") { // 用户点击确定后
                                    console.log('用户订阅点击确定按钮');
                                    // 后端接口
                                } else {
                                    console.log('拒绝，不会再弹出弹框 只能去设置页膝盖');
                                    uni.showModal({
                                        title: '您未开启消息订阅',
                                        content: '为了给您提供更好的服务，请您授权消息订阅',
                                        success: res2 => {
                                            if (res2.confirm) {
                                                uni.openSetting({
                                                    success(res) {
                                                        console.log('打开设置页', res.authSetting);
                                                    }
                                                })
                                            } else {
                                                console.log('决绝')
                                            }
                                        }
                                    })

                                }
                            },
                            fail(errMessage) {
                                uni.showToast({
                                    title: '您已订阅，请勿重复订阅',
                                    icon: 'none'
                                })
                                console.log("订阅消息 失败 ", errMessage);
                            },
                            complete(e) {
                                uni.showToast({
                                    title: '您已订阅，请勿重复订阅',
                                    icon: 'none'
                                })
                                console.log("成功 失败都执行 ", e);
                            }
                        })
                    }
                },
            })
        },
        // unsubscribe() {

        //     // 这里添加取消订阅消息的逻辑
        //     // uni.unsubscribeMessage({
        //     //   templateId: '49EBbz2Jko0-G9ZWLAdY86liamXGsT36IYbfqzhTpeE',
        //     //   success: (res) => {
        //     //     this.isSubscribe = false;
        //     //   },
        //     //   fail: (err) => {
        //     //     console.log('取消订阅失败', err);
        //     //   }
        //     // });
        //     // this.isSubscribe = false;



        //     uni.unsubscribeMessage({
        //         msgTypeList: ['msg-type-1'], // 需要取消订阅的消息类型数组
        //         success: function (res) {
        //             // 成功取消订阅后的回调
        //             console.log('取消订阅成功', res);
        //         },
        //         fail: function (err) {
        //             // 取消订阅失败的回调
        //             console.log('取消订阅失败', err);
        //         },
        //         complete: function () {
        //             // 调用结束的回调（成功、失败都会执行）
        //             console.log('取消订阅结束');
        //         }
        //     });
        // },
        editNick() {
            uni.showModal({
                title: '输入昵称',
                editable: true,
                placeholderText: '请输入要修改的昵称',
                success: (res) => {
                    if (res.confirm) {
                        console.log(res)
                        this.userObj.nickname = res.content
                        this.editInfo()
                    } else if (res.cancel) {

                    }
                }

            })
        },
        chooseavatar(e) {
            console.log(e)
            this.file = e.detail.avatarUrl
            var uploadurl = "https://build.lwjcg.com/api/user/upload?token=" + uni.getStorageSync("USERINFO")
            uni.uploadFile({
                url: uploadurl,
                filePath: this.file,
                name: 'file',
                formData: {
                    'openid': uni.getStorageSync('openId')
                },
                success: (res) => {
                    let urlData = JSON.parse(res.data)
                    this.userObj.avatarUrl = urlData.data.filepath
                    this.userObj.avatar = urlData.data.full_filepath
                    this.editInfo()
                }
            });

        },
        dregs() {
            uni.navigateTo({
                url: '/userPage/protocol/protocol?systemSta=' + '2'
            })
        },
        editInfo() {
            let data = {
                nickname: this.userObj.nickname,
                avatar: this.userObj.avatarUrl
            }
            console.log(data)
            this.$Request.post(this.$api.user.edit, data).then(res => {
                if (res.code == 200) {
                    uni.showToast({
                        title: '修改成功',
                        icon: 'none'
                    })
                    setTimeout(() => {
                        uni.navigateBack({ delta: 1 })
                    }, 600)
                }
            })

        },
        loginOut() {
            uni.showModal({
                title: '确定退出？',
                content: '退出登录后将无法查看订单，重新登录即可查看',
                success: (res) => {
                    if (res.confirm) {
                        let data = {
                            token: uni.getStorageSync('USERINFO')
                        }
                        this.$Request.post(this.$api.user.userLogout, data).then(res => {
                            if (res.code == 200) {
                                uni.setStorageSync('USERINFO', '')
                                uni.showToast({
                                    title: '退出成功',
                                    icon: 'none'
                                })
                                setTimeout(() => {
                                    uni.switchTab({ url: '/pages/user/index' })
                                }, 1000)
                            }
                        })
                    } else if (res.cancel) {
                        console.log('取消')
                    }

                }
            })

        }

    }
}
</script>
<style lang="scss" scoped>
.page {
    width: 100vw;
    height: 100vh;
    background-color: rgba(246, 246, 246, 1);

    .top_box {
        width: 100%;
        height: 460rpx;
        background: linear-gradient(180deg, rgba(226, 244, 243, 1) 0%, rgba(231, 245, 228, 0) 100%);
        margin-bottom: 20rpx;

        .ghtx_box {
            width: 704rpx;
            height: 251rpx;
            opacity: 1;
            border-radius: 28rpx;
            background: rgba(255, 255, 255, 1);
            margin: auto;
            margin-top: 30rpx;

            .tx_box {
                width: 628rpx;
                height: 124rpx;
                border-bottom: 2rpx solid rgba(240, 240, 240, 1);
                margin: auto;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .left_text_box {
                    height: 124rpx;
                    font-size: 32rpx;
                    font-weight: 500;
                    line-height: 124rpx;
                    color: rgba(51, 51, 51, 1);

                }

                .rt_tx_box {
                    height: 100%;
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;

                    .zstx_box {
                        width: 84rpx;
                        height: 84rpx;
                        border-radius: 50%;
                        border: 2rpx solid rgba(229, 229, 229, 1);
                        margin-right: 22rpx;
                        padding: 0;

                        image {
                            width: 100%;
                            height: 100%;
                            border-radius: 50%;
                        }

                    }
                }
            }

            .nickname_box {
                width: 628rpx;
                height: 112rpx;
                // border-bottom: 2rpx solid rgba(240, 240, 240, 1);
                margin: auto;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .zs_nck_box {
                    height: 112rpx;
                    font-size: 32rpx;
                    font-weight: 500;
                    line-height: 112rpx;
                    color: rgba(51, 51, 51, 1);
                }

                .cz_box {
                    height: 112rpx;
                    border-radius: 50%;
                    line-height: 112rpx;
                    color: rgba(128, 128, 128, 1);
                }
            }

            .sex_box {
                width: 628rpx;
                height: 112rpx;
                margin: auto;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .zs_nck_box {
                    height: 112rpx;
                    font-size: 32rpx;
                    font-weight: 500;
                    line-height: 112rpx;
                    color: rgba(51, 51, 51, 1);
                }

                .cz_box {
                    height: 112rpx;
                    border-radius: 50%;
                    line-height: 112rpx;
                    color: rgba(128, 128, 128, 1);
                }
            }

        }


    }

    .account_box {
        width: 704rpx;
        height: 230rpx;
        border-radius: 28rpx;
        background: rgba(255, 255, 255, 1);
        margin: auto;
        margin-bottom: 20rpx;

        .nickname_box {
            width: 628rpx;
            height: 112rpx;
            border-bottom: 2rpx solid rgba(240, 240, 240, 1);
            margin: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .zs_nck_box {
                height: 112rpx;
                font-size: 32rpx;
                font-weight: 500;
                line-height: 112rpx;
                color: rgba(51, 51, 51, 1);
            }

            .cz_box {
                height: 112rpx;
                border-radius: 50%;
                line-height: 112rpx;
                color: rgba(128, 128, 128, 1);
            }
        }

        .sex_box {
            width: 628rpx;
            height: 112rpx;
            margin: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .zs_nck_box {
                height: 112rpx;
                font-size: 32rpx;
                font-weight: 500;
                line-height: 112rpx;
                color: rgba(51, 51, 51, 1);
            }

            .cz_box {
                height: 112rpx;
                border-radius: 50%;
                line-height: 112rpx;
                color: rgba(128, 128, 128, 1);
            }
        }
    }

    .dregs_box {
        width: 704rpx;
        // height: 124rpx;
        border-radius: 28rpx;
        background: rgba(255, 255, 255, 1);
        margin: auto;
        margin-bottom: 48rpx;

        .sex_box {
            width: 628rpx;
            // height: 124rpx;
            margin: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .zs_nck_box {
                height: 124rpx;
                font-size: 32rpx;
                font-weight: 500;
                line-height: 124rpx;
                color: rgba(51, 51, 51, 1);
            }

            .cz_box {
                height: 124rpx;
                border-radius: 50%;
                line-height: 124rpx;
                color: rgba(128, 128, 128, 1);
            }
        }
    }

    .offLogin_box {
        width: 652rpx;
        height: 100rpx;
        border-radius: 20rpx;
        background: rgba(26, 194, 121, 1);
        margin: auto;
        text-align: center;
        line-height: 100rpx;
        font-size: 36rpx;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);

    }
}
</style>